<template>
	<view class="grid">
		<block v-for="(item, index) in gridDatas" :key="index">
			<view class="grid_item" @click.stop="onclick(item)">
				<!-- 网格内对象，使用了作用域插槽 -->
				<slot  :item="item"></slot>
			</view>
		</block>
	</view>
</template>

<script>
	//网格布局组件
	//@group 业务组件
	export default {
		//
		name: 'grid',
		//
		data() {
			return {};
		},
		//
		props: {
			//网格内对象的数据集合
			gridDatas: {
				type: Array,
				default: function() {
					return [];
				},
				required: true
			}
		},
		//
		methods: {
			onclick(item) {
				//点击网格内对象后回调
				//@arg 向父组件传递网格内对象（item）
				this.$emit('grid:click', item)
			},
		}
	};
</script>

<style lang="scss" scoped>
	.grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
		place-items: center;

		.grid_item {
			width: 100%;
		}
	}
</style>